<template>
<!-- 辅助检查 -->
    <div >
        <div class="header">
            <div class="header-left" @click="finish"><image :src="titleUrl" class="header-left-img"></image></div>
            <div class="header-center"><text class="header-text">采血</text></div>
            <div class="header-right" @click="save" v-if="canSave"><text class="header-right-text">保存</text></div>
            <div class="header-right-s" v-if="! canSave"></div>
        </div>
        <div class="content">
            
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">肌钙蛋白:</text></div>
                </div>
                <div class="line-btn" @click="getOcrResult()">
                    <div class="title"><text class="box-text header-right-text">拍照识别</text></div>
                </div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">抽血时间:</text></div>
                    <div class="input" @click="getTime('SAMPLING_TIME')">
                        <text class="input-text">{{resData.SAMPLING_TIME | filterTime}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
                <div class="line">
                    <div class="title"><text class="box-text">报告时间:</text></div>
                    <div class="input" @click="getTime('REPORT_TIME')">
                        <text class="input-text">{{resData.REPORT_TIME | filterTime}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">cTnI:</text></div>
                    <div class="input">
                        <input type="text" class="input-text" v-model="resData.CTNI_VALUE" v-if="canSave"></input>
                        <text type="text" class="input-text" v-if="! canSave">{{resData.CTNI_VALUE}}</text>
                    </div>
                </div>
                <div class="line">
                    <div class="title"><text class="box-text">单位:</text></div>
                    <div class="input" @click="CTNI_UNIT=!CTNI_UNIT">
                        <text class="input-text">{{resData.CTNI_UNIT}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                    <div class="input mf-10" @click="CTNI_STATUS=!CTNI_STATUS">
                        <text class="input-text">{{resData.CTNI_STATUS}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
            </div>
            <div class="box" v-if="CTNI_UNIT && canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.CTNI_UNIT==='ng/ml'?'box-active':'']" @click="resData.CTNI_UNIT='ng/ml',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='ng/ml'?'box-text-active':'']">ng/ml</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_UNIT==='ug/l'?'box-active':'']" @click="resData.CTNI_UNIT='ug/l',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='ug/l'?'box-text-active':'']">ug/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_UNIT==='ng/l'?'box-active':'']" @click="resData.CTNI_UNIT='ng/l',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='ng/l'?'box-text-active':'']">ng/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_UNIT==='pg/ml'?'box-active':'']" @click="resData.CTNI_UNIT='pg/ml',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='pg/ml'?'box-text-active':'']">pg/ml</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_UNIT==='mg/l'?'box-active':'']" @click="resData.CTNI_UNIT='mg/l',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='mg/l'?'box-text-active':'']">mg/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_UNIT==='无单位'?'box-active':'']" @click="resData.CTNI_UNIT='无单位',CTNI_UNIT=false"><text class="checkbox-text" :class="[resData.CTNI_UNIT==='无单位'?'box-text-active':'']">无单位</text></div>
            </div>
            <div class="box" v-if="CTNI_STATUS && canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.CTNI_STATUS==='阳性'?'box-active':'']" @click="resData.CTNI_STATUS='阳性',CTNI_STATUS=false"><text class="checkbox-text" :class="[resData.CTNI_STATUS==='阳性'?'box-text-active':'']">阳性</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNI_STATUS==='阴性'?'box-active':'']" @click="resData.CTNI_STATUS='阴性',CTNI_STATUS=false"><text class="checkbox-text" :class="[resData.CTNI_STATUS==='阴性'?'box-text-active':'']">阴性</text></div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">cTnT:</text></div>
                    <div class="input">
                        <input type="text" class="input-text" v-model="resData.CTNT_VALUE" v-if="canSave"></input>
                        <text type="text" class="input-text" v-if="! canSave">{{resData.CTNT_VALUE}}</text>
                    </div>
                </div>
                <div class="line">
                    <div class="title"><text class="box-text">单位:</text></div>
                    <div class="input" @click="CTNT_UNIT=!CTNT_UNIT">
                        <text class="input-text">{{resData.CTNT_UNIT}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                    <div class="input mf-10" @click="CTNT_STATUS=!CTNT_STATUS">
                        <text class="input-text">{{resData.CTNT_STATUS}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
            </div>
            <div class="box" v-if="CTNT_UNIT && canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.CTNT_UNIT==='ng/ml'?'box-active':'']" @click="resData.CTNT_UNIT='ng/ml',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='ng/ml'?'box-text-active':'']">ng/ml</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_UNIT==='ug/l'?'box-active':'']" @click="resData.CTNT_UNIT='ug/l',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='ug/l'?'box-text-active':'']">ug/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_UNIT==='ng/l'?'box-active':'']" @click="resData.CTNT_UNIT='ng/l',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='ng/l'?'box-text-active':'']">ng/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_UNIT==='pg/ml'?'box-active':'']" @click="resData.CTNT_UNIT='pg/ml',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='pg/ml'?'box-text-active':'']">pg/ml</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_UNIT==='mg/l'?'box-active':'']" @click="resData.CTNT_UNIT='mg/l',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='mg/l'?'box-text-active':'']">mg/l</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_UNIT==='无单位'?'box-active':'']" @click="resData.CTNT_UNIT='无单位',CTNT_UNIT=false"><text class="checkbox-text" :class="[resData.CTNT_UNIT==='无单位'?'box-text-active':'']">无单位</text></div>
            </div>
            <div class="box" v-if="CTNT_STATUS && canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.CTNT_STATUS==='阳性'?'box-active':'']" @click="resData.CTNT_STATUS='阳性',CTNT_STATUS=false"><text class="checkbox-text" :class="[resData.CTNT_STATUS==='阳性'?'box-text-active':'']">阳性</text></div>
                <div class="checkbox mf-10" :class="[resData.CTNT_STATUS==='阴性'?'box-active':'']" @click="resData.CTNT_STATUS='阴性',CTNT_STATUS=false"><text class="checkbox-text" :class="[resData.CTNT_STATUS==='阴性'?'box-text-active':'']">阴性</text></div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">血清肌酐(cr):</text></div>
                    <div class="input">
                        <input type="text" class="input-text" v-model="resData.CR_VALUE" v-if="canSave"></input>
                        <text type="text" class="input-text" v-if="! canSave">{{resData.CR_VALUE}}</text>
                    </div>
                </div>
                <div class="line">
                    <div class="title"><text class="box-text">单位:</text></div>
                    <div class="input" @click="CR_UNIT=!CR_UNIT">
                        <text class="input-text">{{resData.CR_UNIT}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
            </div>
            <div class="box" v-if="CR_UNIT && canSave">
                <div class="line">
                    <div class="title"><text class="box-text"></text></div>
                    <div class="checkbox" :class="[resData.CR_UNIT==='umol/L'?'box-active':'']" @click="resData.CR_UNIT='umol/L',CR_UNIT=-false"><text class="checkbox-text" :class="[resData.CR_UNIT==='umol/L'?'box-text-active':'']">umol/L</text></div>
                    <div class="checkbox mf-10" :class="[resData.CR_UNIT==='无单位'?'box-active':'']" @click="resData.CR_UNIT='无单位',CR_UNIT=-false"><text class="checkbox-text" :class="[resData.CR_UNIT==='无单位'?'box-text-active':'']">无单位</text></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import WeexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/util/DateUtil"
    import StringUtils from "../../common/util/StringUtils"
    import ACApi from "../../common/http/ACApi"
    import Resource from "../../../dist/res/Resource"
    import JsonFilter from "../../common/util/JsonFilter"
    export default {
        name: 'EMNewMainEditInfo',
        data: function () {   
            return {
                titleUrl: 'title_cha_img.png',
                imgUrl: 'choose.png',
                currentTab: 0,
                ORDER_ID: '',
                CTNI_UNIT: false,
                CTNI_STATUS: false,
                CTNT_UNIT: false,
                CTNT_STATUS: false,
                CR_UNIT: false,
                resData: {       
                    CTNI_UNIT:'ng/ml',
                    CTNT_UNIT:'',
                    CR_UNIT:'',
                    CTNI_STATUS:'',
                    CTNT_STATUS:'',
                    SAMPLING_TIME: '',
                    REPORT_TIME: '',
                    CTNI_VALUE: '',
                    CTNT_VALUE: '',
                    CR_VALUE: '' 
                },
                canSave:true
            }                                                     
        },
        mounted: function() {
            let _this = this;
            WeexNativeModule.showProgressDialog('请稍等');
            WeexNativeModule.getParam(function (data) {
//                WeexNativeModule.alert(data);
                let param = JSON.parse(data.param)
                if(param.isJustOpen){
                    _this.canSave = false;
                    let initdata = JSON.parse(param.data);
//                    WeexNativeModule.alert(initdata.CTNI_UNIT);
                    _this.resData.CTNI_UNIT = initdata.CTNI_UNIT;
                    _this.resData.CTNT_UNIT = initdata.CTNT_UNIT;
                    _this.resData.CR_UNIT = initdata.CR_UNIT;
                    _this.resData.CTNI_STATUS = initdata.CTNI_STATUS;
                    _this.resData.CTNT_STATUS = initdata.CTNT_STATUS;
                    _this.resData.SAMPLING_TIME = initdata.SAMPLING_TIME;
                    _this.resData.REPORT_TIME = initdata.REPORT_TIME;
                    _this.resData.CTNI_VALUE = initdata.CTNI_VALUE;
                    _this.resData.CTNT_VALUE = initdata.CTNT_VALUE;
                    _this.resData.CR_VALUE = initdata.CR_VALUE;
//                    WeexNativeModule.alert(_this.resData);
                }else {
                    _this.canSave = true;
                    _this.ORDER_ID = param.taskcode
                }
            })
        },
        filters: {
            filterTime: function(item) {
                if(item) {
                    let time = DateUtil.formatTime(item,'yyyy-MM-dd hh:mm');
                    return time
                }
            }
        },
        methods: {
            finish: function() {
                WeexNativeModule.finish()
            },
            getOcrResult:function () {
                let _this = this
                WeexNativeModule.getOcrResult(function (res) {
                    WeexNativeModule.alert(res.result)
                    res.result.map(function(p){
                        if(p.word_name == '报告日期'){
                            p.word = p.word.substring(0,10) + ' ' + p.word.slice(-5)
                            _this.resData.REPORT_TIME = p.word
                            var str = p.word.replace(/\./g,"/")
                            var newTime = new Date(str).getTime() - 1200000
                            var time = DateUtil.formatTime(newTime,'yyyy-MM-dd hh:mm');
                            _this.resData.SAMPLING_TIME = time
                        }else if(p.word_name == '肌钙蛋白'){
                           _this.resData.CTNI_VALUE = p.word 
                        }
                        
                    })
                })
            },
            getTime: function(type) {
                let _this = this
                if(! _this.canSave){
                    return;
                }
                let defaultdate
                let typeTime
                for(let key in _this.resData) {
                    if(key == type) {
                        typeTime = _this.resData[key]
                    }
                }
                if(!StringUtils.isEmpty(typeTime)){
                    defaultdate = DateUtil.formatTime(
                        new Date(_this.tourniquetTime),'yyyy-MM-dd hh:mm');
                }else {
                    defaultdate = DateUtil.formatTime(
                        new Date(),'yyyy-MM-dd hh:mm');
                }
                WeexNativeModule.selectDateTime(defaultdate,false,true,true,true,true,false,false,"","",function(time) {
                    for(let key in _this.resData) {
                            if(key == type) {
                                _this.resData[key] = DateUtil.formatTime(time.data,'yyyy-MM-dd hh:mm')
                            }
                        }
                })
            },
            save: function() {
                let _this = this;
                let postjson = JsonFilter.filter(_this.resData);
                if(_this.canSave){
                    postjson.ORDER_ID = _this.ORDER_ID;
                    WeexNativeModule.addEMNode(postjson)
                }
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #f2f2f2;
    }
    .header-center{
        width: 80px;
        height: 40px;

        justify-content: center;
        align-items: center;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 15px;
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-right-s {
        width: 80px;
        height: 25px;
        margin-right: 20px;
        border-radius: 2px;
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }
    .banner-tab {  
        width: 760px;      
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #f2f2f2;
        padding-left: 5px;
        padding-right: 5px;
              
    }
    .tab {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center; 
        margin-left: 5px;
        margin-right: 5px;
        border-bottom-style: solid;
        border-bottom-width: 0;
        border-bottom-color: #FFF;
    }
    .tab-text {
        text-align: center;
        font-size: 12px;
        color: #666;
    }
    .tab-active {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #4c7fd8;
    }
    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .line-btn {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
        border-radius: 3px;
        background-color: #4c7fd8;
    }
    .title {
        width: 80px;
    }       
    .input {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }
    .input-text {  
        color: #666;
        line-height: 22px;     
        font-size: 12px;
    }    
    .checkbox {
        width: 87px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-text {
        font-size: 12px;
        color: #666;
    }   
    .mf-10 {
        margin-left: 10px;
    }
    .box-active {
        background-color: #4c7fd8;
    }
    .box-text-active {
        color: #FFF;
    }
    .img-unit {
        position: absolute;                  
        top: 3px;
        right: 5px;
        width: 8px;
        height: 16px;
    }
</style>

